import { CommentModelState } from "@/models/comment";
import { useEffect, useState } from "react"
import { useDispatch, useSelector } from "umi";
import { Pagination } from 'antd';

interface IProps{
  id: string
}
const Comment: React.FC<IProps> = ({id})=>{
  const dispatch = useDispatch();
  const {commentList, commentLength} = useSelector((state: { comment: CommentModelState }) =>state.comment);
  const [current, setCurrent] = useState(1);

  useEffect(()=>{
      dispatch({
        type: 'comment/getArticleComment',
        payload: {
          id
        }
      })
  }, [])

  function changePage(page: number){
    dispatch({
      type: 'comment/getArticleComment',
      payload: {
        id, page
      }
    })
    setCurrent(page);
  }

  return <div>
    {
      commentList.map(item=>{
        return <li key={item.id}>
          <div dangerouslySetInnerHTML={{__html: item.html}}></div>
        </li>
      })
    }
    <Pagination current={current} defaultCurrent={1} pageSize={6} total={commentLength} onChange={changePage}/>
  </div>
}

export default Comment;
